<template>
  <view class="requirement">
    <!-- 联系方式 -->
    <view class="title">
      联系方式
    </view>
    <view class="t-ju-between list">
      <view class="left_list">
        称呼
      </view>
      <view class="right_list">
        陈先生
      </view>
    </view>
    <view class="t-ju-between list">
      <view class="left_list">
        联系电话
      </view>
      <view class="right_list">
        13000000000
      </view>
    </view>
    <!-- 场景信息 -->
    <view class="title">
      场景信息
    </view>
    <view class="t-ju-between list">
      <view class="left_list">
        设计场景
      </view>
      <view class="right_list" @click="openSelect(0)">
        <span :class="designScenarios ? 'color1' : 'color2'">{{ designScenarios ? designScenarios : '请选择' }}</span>
      </view>
    </view>
    <view class="t-ju-between list">
      <view class="left_list">
        需要绿植数量
      </view>
      <view class="right_list" @click="openSelect(1)">
        <span :class="number ? 'color1' : 'color2'">{{ number ? number : '请选择' }}</span>
      </view>
    </view>
    <view class="t-ju-between list">
      <view class="left_list">
        当前城市<span style="color: #009DFF;">（{{city}}）</span>
      </view>
      <view class="right_list">
        <span :class="city ? 'color1' : 'color2'">{{ city ? '切换城市' : '请选择' }}</span>
      </view>
    </view>
    <view class="title">
      备注
    </view>
    <view class="textarea_box mar_auto_20">
      <textarea @blur="bindTextAreaBlur" auto-height />
    </view>
    <view class="title">
      播放场景图
    </view>
    <!-- <u-picker :show="businesstypeShow" :columns="businesstypeList" @confirm="confirm" @cancel="close"
      closeOnClickOverlay @close="close"></u-picker> -->
    <u-select v-model="businesstypeShow" mode="single-column" :list="businesstypeList" @confirm="confirm"></u-select>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        page: '设计要求',
        designScenarios: '',
        number: '',
        city: '北京市',
        businesstypeShow: false,
        businesstypeList: [
          ['中国', '美国', '日本']
        ]
      }
    },
    methods: {
      // 输入框是去焦点时出发
      bindTextAreaBlur(e) {
        console.log(e, '出发');
      },
      confirm(val) {
        console.log(val, '选择的数据');
      },
      close() {
        this.businesstypeShow = false
      },
      openSelect(type) {
        console.log(123123);
        this.businesstypeShow = true
        if (type == 0) {
          this.businesstypeList = ['中国', '美国', '日本']
        } else {
          this.businesstypeList = ['3', '1', '2']
        }
      }
    }

  }
</script>
<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="scss">
  .requirement {
    padding: 30rpx;

    .title {
      font-size: 32rpx;
      line-height: 70rpx;
      font-weight: bold;
      border-bottom: 2rpx solid #EEEEEE;
    }

    .textarea_box {
      padding: 20rpx;
      width: 92%;
      border: 1rpx solid #797979;
      box-sizing: border-box;

      .textarea {
        border: none;
      }
    }

    .list {
      padding: 0rpx 8rpx;
      height: 80rpx;

      .left_list {
        font-size: 24rpx;
        color: #9E9E9E;
      }

      .right_list {
        font-size: 26rpx;
        font-weight: 500;

        .color2 {
          color: #9E9E9E;
        }

        .color1 {
          color: black;
        }
      }
    }
  }
</style>